<template>
	<view>
		<view class="slider-box">
			<view class="flex"></view>
			<movable-area class="sliderBar" :style="{width: (100 - minScore)+'%'}">
				<view class="gone" :style="{width: (slideBarWidth*score)/100 +'px'}"></view>
				<movable-view class="slider" :x="x" :y="y" direction="all" @change="onChange">
					<text>{{ score }}</text>
				</movable-view>
			</movable-area>
			<view :style="{width: (100 - maxScore) +'%'}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['min','max'],
		data() {
			return {
				slideBarWidth:0,
				minScore: this.min?this.min:0,
				maxScore: this.max?this.max:100,
				x: 0,
				y: 0,
                oldX:0,
				score: this.min?this.min:0,
                refused:false
			};
		},
		mounted() {
			
		},
		methods:{
            init(score){
                var that = this;
                this.$nextTick(()=>{
                    const query = uni.createSelectorQuery().in(this);
                        // 选择类名为.some-element的元素
                        query.select('.slider-box').boundingClientRect(data => {
                          if (data) {
                            // data中包含元素的宽度（width）和高度（height）等信息
                            
                            that.slideBarWidth = data.width
                            if(score){
                                
                                that.$nextTick(function() {
                                                 that.x=(data.width*score)/100
                                                 that.oldX = (data.width*score)/100
                                                that.score =score
                                                
                                            })
                               
                                 // that.score=score
                            }else{
                                that.$nextTick(function() {
                                                 that.x=(data.width*75)/100
                                                 that.oldX = (data.width*75)/100
                                                that.score =75
                                                
                                            })
                            }
                          }
                        }).exec(); // 执行选择器查询
                    // const query = uni.createSelectorQuery();
                    // query.select('.slider-box').boundingClientRect(); //获取当前元素距离顶部的距离
                    // query.exec(res =>{
                    // 	console.log(res)
                    // })
              // console.log(    uni.createSelectorQuery().select(".slider-box").boundingClientRect())  
                 //    .boundingClientRect(function(res) {
                 //        console.log(res)
                	// 	that.slideBarWidth = res.width
                	// }).exec();
                })
            },
			onChange: function(e,i) {
                
				// this.x = e.detail.x/*  */
                
				this.score = parseInt(e.detail.x/this.slideBarWidth*100)
                 // this.oldX=parseInt(e.detail.x/this.slideBarWidth*100)
				this.$emit('change',this.score)
			}
		}
	}
</script>

<style lang="scss">
	$uni-color-primary: #A187F9;
	.slider-box {
		display: flex;
		width: 100%;
		height: 32rpx;
		position: relative;
		&::before{
			content: '';
			position: absolute;
			height: 8rpx;
			border-radius: 8rpx;
			background-color: #EEEEEE;
			top: 0;
            bottom: 0;
            margin: auto;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
		}
		.flex {
			flex: 1;
			height: 8rpx;
			border-radius: 8rpx 0 0 8rpx;
			background-color: $uni-color-primary;
			margin-top: 10rpx;
			position: relative;
			z-index: 1;
		}

		.sliderBar {
			height: 100%;
			border-radius: 8rpx;
			width: 100%;
			.gone {
				background-color: $uni-color-primary;
				height: 100%;
				position: absolute;
				left: 0;
				height: 8rpx;
				top: 10rpx;
				max-width: 100%;
				z-index: 1;
				border-radius: 0 8rpx 8rpx 0;
			}
			.slider {
				width: 0;
				height: 100%;
				position: relative;
				z-index: 2;
				&::after {
					content: '';
					position: absolute;
					border-radius: 16rpx;
					background-color: $uni-color-primary;
					width: 32rpx;
					height: 100%;
					transform: translatex(-50%);
				}
				text {
					position: absolute;
					width: 60rpx;
					color: white;
					border-radius: 14rpx;
					top: -140%;
					left: 50%;
					text-align: center;
					transform: translateX(-50%);
					background-color: $uni-color-primary;
					&::after {
						content: '';
						position: absolute;
						border: 6rpx solid transparent;
						border-top-color: $uni-color-primary;
						top: 99%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
</style>
